<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/includes/common.jsp"%>

		<div id="chat-log-container" style="overflow: auto; width: 100%; height: 350px;">
			<div id="chat-log">
				log	chat
			</div>
		</div>
<!-- <div id="multiple-choices">
<form>
<input type="radio" name="mc-answers" value="yes" /> Yes<br />
<input type="radio" name="mc-answers" value="no" /> No
</form> 
</div>

<div id="check-box">
<form>
<input type="checkbox" name="cb-answers" value="banana" /> Banana<br />
<input type="checkbox" name="cb-answers" value="apple" /> Apple
</form> 
</div> -->

		<div>
			<label>
				<b>::Chat Input::</b><br />
				<textarea onkeydown="enter(event);" name="chat-input" id="chat-input" style="width: 80%"	cols="45" rows="3"></textarea>
				<button onclick="onSendClick();" style="width: 15%; height:65px ;vertical-align: top;">Send</button>
			</label>
		</div>

	
<script type="text/javascript">
//$(document).ready(function () {
	  //your code here
//});

	function onSendClick(){
		var userMessage = $("#chat-input").val();
		if (!isNullOrEmpty(userMessage)){
			$.ajax({
				type: 'POST',
				url: '/chat/chat',
				
				data: { "msg-type": "user-sent", "user-msg": $("#chat-input").val()},
				dataType: 'JSON',
				success: function (json){
					$("#chat-log").append("<div>" + json.user + "<\div>");
					$("#chat-log").append("<div>" + json.fesser + "<\div>");	
					
					var items = [];
	
					$.each(json.recommender, function(mealKey, meal) {
						var dishList;
						items.push('<li id="'+mealKey+'">' + mealKey + '</li>');
						$.each(meal, function(dishKey, dish) {
							items.push('<li id="'+dishKey+'"><a href="#" onclick="viewDish(\''+dish+'\');">' + dish + '</a></li>');
						});
						
					});
	
					$("#recommend-list").replaceWith("<div><ul id=meal-list>" +
						items.join('')+						  
						"</ul></div>"
					);

					
					$("#chat-log-container").scrollTop($("#chat-log").height());	

											
				},
				error: function (er) {
					alert(er.toString());
				}			
			});
			$("#chat-input").val("");
			$("#chat-input").focus();
		}
		
	};
	

	function enter(evt)
	{
		if (evt.which == 13)
		{
			if (!evt.shiftKey){				
				evt.preventDefault();
				onSendClick();	
			}
		}				
	}

	function viewDish(id){
		$("#dish-list").show();
		$("#dish-list-button").css("font-weight","bold");
		$("#recommend-list").hide();
		$("#recommend-list-button").css("font-weight","normal");
		
		$("#dish-list-frame").attr('src','/dish/view?id='+id+'\&edit=false');
	}

	
</script>